<template>
  <view class="my-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="user-avatar">
        <image src="/static/logo.png" mode="aspectFill"></image>
      </view>
      <view class="user-details">
        <view class="user-name">点击登录/注册</view>
        <view class="user-id">ID: 未登录</view>
      </view>
      <view class="edit-icon">
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
    </view>

    <!-- 订单管理区域 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">订单管理</text>
        <view class="section-more">
          <text>全部订单</text>
          <text class="uni-iconfont uni-icon-right"></text>
        </view>
      </view>
      
      <view class="order-types">
        <view class="order-type">
          <view class="order-icon">
            <text class="uni-iconfont uni-icon-waiting"></text>
          </view>
          <text class="order-text">待付款</text>
        </view>
        <view class="order-type">
          <view class="order-icon">
            <text class="uni-iconfont uni-icon-truck"></text>
          </view>
          <text class="order-text">待发货</text>
        </view>
        <view class="order-type">
          <view class="order-icon">
            <text class="uni-iconfont uni-icon-unpacking"></text>
          </view>
          <text class="order-text">待收货</text>
        </view>
        <view class="order-type">
          <view class="order-icon">
            <text class="uni-iconfont uni-icon-comment"></text>
          </view>
          <text class="order-text">待评价</text>
        </view>
        <view class="order-type">
          <view class="order-icon">
            <text class="uni-iconfont uni-icon-refund"></text>
          </view>
          <text class="order-text">退款/售后</text>
        </view>
      </view>
    </view>

    <!-- 功能列表区域 -->
    <view class="function-section">
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-location"></text>
        </view>
        <text class="function-text">地址管理</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
      
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-user"></text>
        </view>
        <text class="function-text">修改个人信息</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
      
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-heart"></text>
        </view>
        <text class="function-text">我的收藏</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
      
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-coupon"></text>
        </view>
        <text class="function-text">优惠券</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
    </view>

    <!-- 客服与设置区域 -->
    <view class="service-section">
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-headphones"></text>
        </view>
        <text class="function-text">联系客服</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
      
      <view class="function-item">
        <view class="function-icon">
          <text class="uni-iconfont uni-icon-setting"></text>
        </view>
        <text class="function-text">设置</text>
        <text class="uni-iconfont uni-icon-right"></text>
      </view>
    </view>

    <!-- 登录/注册按钮 -->
    <view class="login-section">
      <button class="login-btn">登录/注册</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 这里不添加逻辑，只保留空的data和export结构
      }
    }
  }
</script>

<style>
  .my-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 80rpx;
  }

  /* 用户信息区域 */
  .user-info-section {
    background-color: #fff;
    padding: 40rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
  }
  
  .user-avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f0f0f0;
  }
  
  .user-avatar image {
    width: 100%;
    height: 100%;
  }
  
  .user-details {
    flex: 1;
    margin-left: 30rpx;
  }
  
  .user-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .user-id {
    font-size: 28rpx;
    color: #999;
    margin-top: 10rpx;
  }
  
  .edit-icon {
    color: #999;
  }

  /* 订单管理区域 */
  .order-section {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 30rpx;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .section-more {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 28rpx;
  }
  
  .section-more .uni-icon-right {
    margin-left: 10rpx;
  }
  
  .order-types {
    display: flex;
    justify-content: space-between;
    padding-top: 30rpx;
  }
  
  .order-type {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .order-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15rpx;
    font-size: 40rpx;
    color: #666;
  }
  
  .order-text {
    font-size: 26rpx;
    color: #666;
  }

  /* 功能列表区域 */
  .function-section,
  .service-section {
    background-color: #fff;
    margin-top: 20rpx;
  }
  
  .function-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .function-section .function-item:last-child,
  .service-section .function-item:last-child {
    border-bottom: none;
  }
  
  .function-icon {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #666;
  }
  
  .function-text {
    flex: 1;
    margin-left: 30rpx;
    font-size: 30rpx;
    color: #333;
  }
  
  .function-item .uni-icon-right {
    color: #ccc;
    font-size: 24rpx;
  }

  /* 登录按钮区域 */
  .login-section {
    padding: 60rpx 40rpx;
  }
  
  .login-btn {
    background-color: #07c160;
    color: #fff;
    font-size: 32rpx;
    border-radius: 10rpx;
  }
</style>